<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>进阶：4、多个元素的过渡</title>
	<script type="text/javascript" src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
	<div id="app">
		<transition>
			<table v-if="items.length > 0" >
				<tr v-for="item in items"><td>{{ item.id }}</td><td>{{ item.msg }}<td></tr>
			</table>
			<p v-else>Sorry, no items found.</p>			
		</transition>
		<button @click="toggle">Toggle</button>
	</div>

	<script type="text/javascript">
		// 除了单个元素的dom操作过渡，有时多个元素之前的切换也可以使用过渡效果
		// 一般使用 v-if / v-else 来控制
		// 如果多个元素是相同标签，最好加上一个key作为唯一标识来让Vue区分它们
		// 因此，给在 <transition> 组件中的多个元素设置 key 是一个更好的实践。
		var vm = new Vue({
			el: '#app',
			data: {
				items: [
					{ id: 1, msg: 'msg1' },
					{ id: 2, msg: 'msg2' },
					{ id: 3, msg: 'msg3' },
					{ id: 4, msg: 'msg4' }
				]
			},
			methods: {
				toggle: function(){
					if(this.items.length > 0){
						this.items = []
					}else{
						this.items = [
							{ id: 1, msg: 'msg1' },
							{ id: 2, msg: 'msg2' },
							{ id: 3, msg: 'msg3' },
							{ id: 4, msg: 'msg4' }
						]
					}
				}
			}
		})

		// --------------------------- 过渡模式 -----------------------------
		// 为了能控制<transition>标签内多个组件切换过渡时过渡效果的渲染顺序，
		// 可以加上 mode 属性来控制先渲染新元素过渡还是旧元素过渡效果
		// in-out: 新元素先进行过渡，完成之后当前元素过渡离开。
		// out-in: 当前元素先进行过渡，完成之后新元素过渡进入。	
		
	</script>
</body>
</html>